<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header">
	<style type="text/css">
		html,body{
			width:100%;
			height:100%;
		}
		#container{
			width:100%;
			height:90%;
		}
		*{
			margin:0px;
			padding:0px;
		}
		body, button, input, select, textarea {
			font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
		}
		p{
			width:603px;
			padding-top:3px;
			overflow:hidden;
		}
	</style>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-elevatorInfo-edit" th:object="${elevatorInfo}">
			<input id="elevatorId" name="elevatorId" th:field="*{elevatorId}"  type="hidden">
			<div class="form-group">
				<label class="col-sm-3 control-label"><span style="color: red; ">*</span>所属社区：</label>
				<div class="col-sm-6">
					<select class="form-control" id="belongCommunity" name="belongCommunity" required>
						<option th:each="communityManage : ${communityManageList}" th:text="${communityManage.communityName}" th:value="${communityManage.communityId}" th:field="*{belongCommunity}"></option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">楼宇单元：</label>
				<div class="col-sm-6">
					<input id="buildingUnit"  placeholder="请输入楼宇单元名称" name="buildingUnit" th:field="*{buildingUnit}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label"><span style="color: red; ">*</span>电梯类型：</label>
				<div class="col-sm-6">
					<select name="straightElevatorType" class="form-control m-b" th:field="*{straightElevatorType}" required>
						<option value="">请选择电梯类型</option>
						<option value="0">液压电梯</option>
						<option value="1">曳引电梯</option>
						<option value="2">杂物电梯</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label"><span style="color: red; ">*</span>电梯名称：</label>
				<div class="col-sm-6">
					<input id="elevatorName" placeholder="请输入名称" name="elevatorName" th:field="*{elevatorName}" class="form-control" type="text" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label"><span style="color: red; ">*</span>经纬度：</label>
				<div class="col-sm-6">
					<input id="longitude" name="longitude" th:field="*{longitude}" class="form-control" type="text" readonly required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">地图选择：</label>
				<div class="col-sm-6">
					<!--   显示地图的区域   -->
					<div id="container" style="height:500px;width:800px;"></div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">识别码：</label>
				<div class="col-sm-6">
					<input id="identifyCode" placeholder="请输入识别码" name="identifyCode" th:field="*{identifyCode}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label"><span style="color: red; ">*</span>注册码：</label>
				<div class="col-sm-6">
					<input id="registeredCode" placeholder="请输入注册码" name="registeredCode"  th:field="*{registeredCode}" class="form-control" type="text" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">使用地点：</label>
				<div class="col-sm-6">
					<input id="usePlace" placeholder="请输入使用地点" name="usePlace" th:field="*{usePlace}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label"><span style="color: red; ">*</span>建筑类型：</label>
				<div class="col-sm-6">
					<select name="buildType" class="form-control m-b" th:with="type=${@dict.getType('business_build_type')}" required>
						<option value="">请选择建筑类型</option>
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{buildType}"></option>
					</select>
				</div>
			</div>

		</form>
	</div>
    <div th:include="include::footer"></div>
    <script type="text/javascript">
		var prefix = ctx + "business/elevatorInfo"
		$("#form-elevatorInfo-edit").validate({
			rules:{
				xxxx:{
					required:true,
				},
			}
		});

		//腾讯地图
		function init() {
            //获取设置的点
            var getPoint = $("#longitude").val();
            //设置地图中心点
            var myLatlng = new qq.maps.LatLng(getPoint.split(",")[0],getPoint.split(",")[1]);
			//定义工厂模式函数
			var myOptions = {
				zoom: 15,               //设置地图缩放级别
				center: myLatlng,      //设置中心点样式
				mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
			}
			//获取dom元素添加地图信息
			var map = new qq.maps.Map(document.getElementById("container"), myOptions);
			var markPoint;
			//添加定时器(初始化地图标记点)
			setTimeout(function(){
				markPoint=new qq.maps.Marker({
					position:myLatlng,
					animation:qq.maps.MarkerAnimation.BOUNCE,
					map:map
				});
			},2000);
			//添加监听事件(鼠标点击切换标记点)
			qq.maps.event.addListener(map, 'click', function(evt) {
				if(!markPoint) {
					markPoint=new qq.maps.Marker({
						position:evt.latLng,
						map:map
					});
					return;
				}
				markPoint.setPosition(evt.latLng);
				console.log(evt.latLng.getLat().toFixed(6),evt.latLng.getLng().toFixed(6));
				//将对应的HTML元素设置值
				$("#longitude").val(evt.latLng.getLng().toFixed(6)+","+evt.latLng.getLat().toFixed(6));
			});
		}
		//异步加载地图库函数文件
		function loadScript() {
			//创建script标签
			var script = document.createElement("script");
			//设置标签的type属性
			script.type = "text/javascript";
			//设置标签的链接地址
			script.src = "https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&callback=init";
			//添加标签到dom
			document.body.appendChild(script);
		}
		window.onload = loadScript;    // dom文档加载结束开始加载 此段代码

		function submitHandler() {
			if ($.validate.form()) {
				$.operate.save(prefix + "/edit", $('#form-elevatorInfo-edit').serialize());
			}
		}

		function submitHandler() {
	        if ($.validate.form()) {
	            $.operate.save(prefix + "/edit", $('#form-elevatorInfo-edit').serialize());
	        }
	    }
	</script>
</body>
</html>
